<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-栅格网络</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
    <script src="./layui/layui.js"></script>
</head>
<body>
    <!-- 
        栅格系统
            列组合
                1. 定义容器(固定宽度) class="layui-container"
                2. 定义行 class="layui-row"
                3. 定义列 (一行12列,不能超出) layui-col-md* (星号表示数字(列数)) class="layui-col-md5"
                    md 表示不同屏幕的表示 (xs sm md lg)

                    lg 大屏幕 (>=1200px) layui-col-lg*
                    md 中等屏幕 (桌面 >=992px) layui-col-md*
                    sm 小屏幕(平板之类 >=768px) layui-col-sm*
                    xs 超小屏幕(手机 <768px) layui-col-xs*
                   
                4. 每一行被均分为12列,列总数不能超过12 否者自动换行
                5. 响应式规则
                    栅格会自动根据屏幕分辨率选择对应的样式效果
            列边距
                (.layui-col-space*)
                    * 代表px值 (1~30复数值) (1 5 10 ...奇数值)
                

     -->
    <div class="layui-container">
        <!-- 定义行-->
        <div class="layui-row">
            <!-- 定义列 -->
            <div class="layui-col-md5" style="background-color: red;">5/12</div>
            <div class="layui-col-md7" style="background-color: blue;">7/12</div>
        </div>
        <br>
        <div class="layui-row">
            <!-- 定义列 -->
            <div class="layui-col-md4" style="background-color: red;">4/12</div>
            <div class="layui-col-md4" style="background-color: blue;">4/12</div>
            <div class="layui-col-md4" style="background-color: red;">4/12</div>
        </div>
    </div>

    <!-- 要给hr加背景颜色! -->
    <hr style="background-color: red;">

    <!-- 列边距 -->
    <h3>列边距</h3>
    <!-- 列边距最多30  layui-col-space30-->
    <div class="layui-row layui-col-space20">
       
        <div class="layui-col-md4">
            <div style="background-color: red;">4</div>
        </div>

        <div class="layui-col-md4">
            <div style="background-color: blue;">4</div>
        </div>

        <div class="layui-col-md4">
            <div style="background-color: palegreen;">4</div>
        </div>
    </div>

    <hr style="background-color: red;">

    <!-- 列偏移 -->
    <div class="layui-container">  <!-- 固定宽度 -->
        <h3>列偏移</h3>
        <div class="layui-row">
            <div class="layui-col-md4" style="background-color: pink;">
                4/12
            </div>

            <!-- layui-col-md-offset4，即代表在“中型桌面屏幕”下，让该列向右偏移 4 个列宽度  -->
            <div class="layui-col-md4 layui-col-md-offset4" style="background-color: darkcyan;">
                偏移4列,从而在最右
            </div>
        </div>
    </div>

    <hr style="background-color: red; height:3px;">

    <!-- 列嵌套 -->
    <div class="layui-container">
        <div class="layui-row" >
            <div class="layui-col-md6" style="background-color: #ccc;">
                <!-- 又分成12份! -->
                <div class="layui-row" >
                    <div class="layui-col-md6" style="background-color: #0ff;">
                        6-12/6
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>